<template>
  <div class="app">
    <h3>我是App组件（祖）{{name}}--{{price}}</h3>
    <Child />
  </div>
</template>

<script>
import {reactive,toRefs,provide} from 'vue'
import Child from './components/Child.vue'
export default {
  name: 'App',
  components:{Child},
  setup(){
    let car = reactive({name:'奔驰',price:'40W'})
    provide('car',car) // 给自己的后代组件传递数据
    return {...toRefs(car)}
  }
}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>